<template>
  <div class="account_table">
    <el-table :data="data" height="100%" style="width: 100%" v-loading="loading">
      <el-table-column :label="languageJson.account.orderTime">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.created_at }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.betID">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.motion">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.sport_type == 'soccer' ? languageJson.home.soccer : languageJson.home.basketball }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.homeTeam">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.home_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.awayTeam">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.away_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.betType">
        <template #default="scope">
          <div class="flex text1">
            <!-- {{ scope.row.pk_odds_key_ch }} -->
            {{ gethandicapname(scope.row.sport_type, scope.row.place_pk_info) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.order.profit">
        <template #default="scope">
          <div
            class="flex text1"
            :style="scope.row.total_win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'"
          >
            {{ scope.row.total_win_back }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.home.orderAmount">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.total_amount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.home.odd">
        <template #default="scope">
          <div class="flex text1">
            {{ scope.row.place_odds_info }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.user.balance">
        <template #default="scope">
          <div class="flex text1">--</div>
        </template>
      </el-table-column>
      <el-table-column :label="languageJson.account.settlementStatus" width="150">
        <template #default="scope">
          <div class="flex text1">
            <img
              v-if="scope.row.check_status == 0"
              src="@/assets/order/shibai.png"
              style="width: 16px; height: 16px"
              alt=""
            />
            <img
              v-if="scope.row.check_status == 1"
              src="@/assets/order/yijiesuan.png"
              style="width: 16px; height: 16px"
              alt=""
            />
            <div
              class="text2"
              style="margin-left: 4px"
              :style="scope.row.check_status == 0 ? 'color: #ff5f58;' : 'color: #3711d8;'"
            >
              {{
                scope.row.check_status == 0
                  ? languageJson.order.unresolved
                  : languageJson.order.alreadysettled
              }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { http } from '@/utils/http'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const props = defineProps({
  data: Array,
  loading: Boolean,
})

const textmap = ref({
  soccer_handicap: {
    ce_odds_data: languageJson.value.home.corner,
    odds_data: '',
    pc_odds_data: languageJson.value.home.card,

    full: languageJson.value.home.full,
    half: languageJson.value.home.half,

    M: '',
    R: languageJson.value.home.letballgo,
    OU: languageJson.value.home.ou,
    OUH: languageJson.value.home.homeGoalTotal,
    OUC: languageJson.value.home.awayGoalTotal,
    CRS: '',
  },
  basketball_handicap: {
    ce_odds_data: languageJson.value.home.corner,
    odds_data: '',
    pc_odds_data: languageJson.value.home.card,
    // pd_odds_data: '波胆',

    full: languageJson.value.home.full,
    half: languageJson.value.home.half,
    section1: languageJson.value.home.section1,
    section2: languageJson.value.home.section2,

    M: '',
    R: languageJson.value.home.letballgo,
    OU: languageJson.value.home.ou,
    OUH: languageJson.value.home.basketballFirstScore,
    OUC: languageJson.value.home.basketballSecondScore,
    CRS: '',
  },
})

const gethandicapname = (sport_type, pk_odds_key) => {
  let pkoddskeyarr = pk_odds_key.split(':')
  let handicap = sport_type == 'soccer' ? textmap.value.soccer_handicap : textmap.value.basketball_handicap
  let a = {}
  let handicapname = []
  let handicapnamestr = ''

  if (pkoddskeyarr[0] == 'C') {
    handicapname.push(`${handicap[[pkoddskeyarr[1]]]}${languageJson.value.home.corner}`)
    if (pkoddskeyarr[2] == 'OU') {
      if (pkoddskeyarr[pkoddskeyarr.length - 1] == '0') {
        handicapname.push(languageJson.value.home.over)
      } else {
        handicapname.push(languageJson.value.home.under)
      }
    } else {
      handicapname.push(handicap[[pkoddskeyarr[2]]])
    }
  } else if (pkoddskeyarr[0] == 'F') {
    handicapname.push(`${handicap[[pkoddskeyarr[1]]]}${languageJson.value.home.card}`)
    if (pkoddskeyarr[2] == 'OU') {
      if (pkoddskeyarr[pkoddskeyarr.length - 1] == '0') {
        handicapname.push(languageJson.value.home.over)
      } else {
        handicapname.push(languageJson.value.home.under)
      }
    } else {
      handicapname.push(handicap[[pkoddskeyarr[2]]])
    }
  } else {
    handicapname.push(`${handicap[[pkoddskeyarr[0]]]}`)

    if (pkoddskeyarr[1] == 'OU') {
      if (pkoddskeyarr[pkoddskeyarr.length - 1] == '0') {
        handicapname.push(languageJson.value.home.over)
      } else {
        handicapname.push(languageJson.value.home.under)
      }
    } else {
      if (pkoddskeyarr[1] == 'R') {
        if (pkoddskeyarr[pkoddskeyarr.length - 1] == '0') {
          handicapname.push(languageJson.value.home.home)
        } else {
          handicapname.push(languageJson.value.home.away)
        }
      }
      if (pkoddskeyarr[1] != 'M') {
        handicapname.push(handicap[pkoddskeyarr[1]])
      } else {
        if (pkoddskeyarr[3] == '0') {
          handicapname.push([`${languageJson.value.home.home}${languageJson.value.home.win}`])
        }
        if (pkoddskeyarr[3] == '1') {
          handicapname.push([`${languageJson.value.home.away}${languageJson.value.home.win}`])
        }
        if (pkoddskeyarr[3] == '2') {
          handicapname.push([languageJson.value.home.draw])
        }
      }
      if (pkoddskeyarr[1] == 'OUH' || pkoddskeyarr[1] == 'OUC') {
        if (pkoddskeyarr[pkoddskeyarr.length - 1] == '0') {
          handicapname.push(languageJson.value.home.over)
        } else {
          handicapname.push(languageJson.value.home.under)
        }
      }
    }
  }

  if (pkoddskeyarr[1] != 'M') {
    handicapname.push(pkoddskeyarr[pkoddskeyarr.length - 2])
  }
  handicapnamestr = handicapname.join(':')
  return handicapnamestr
}
</script>

<style lang="scss" scoped>
.account_table {
  height: calc(100% - 100px);
}
.flex {
  display: flex;
  align-items: center;
}
.text1 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}

.radio_div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3711d8;
  margin-right: 8px;
}

.status {
  margin-right: 8px;
}
</style>

<style>
.account_table thead tr th.el-table__cell {
  height: 36px;
  line-height: 36px;
  padding: 6px 0;
  background-color: #f3f5fd;
}
.account_table tbody tr td.el-table__cell {
  border-color: rgba(55, 17, 216, 0.08);
  padding: 12px 0;
}
.account_table .active_row .el-table__cell {
  border: none;
  background-color: #f8f9fe;
}
.account_table .el-table__expanded-cell {
  background-color: #f8f9fe;
  padding: 8px;
}
.account_table thead tr th.el-table__cell .cell {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}
</style>